<template>
    <div class="menu">
        <div class="title">外卖管理系统</div>
        <el-menu :default-active="Uproute" router class="el-menu-vertical-demo" unique-opened active-text-color="#ffd04b"
            background-color="#304156" text-color="#fff">
            <template v-for="item in menus" >                 
                <el-sub-menu v-if="item.children && item.children.length"   :index="item.path">
                    <template #title>
                        <el-icon>
                            <i :class="['iconfont',item.icon]"></i>
                        </el-icon>
                        <span>{{ item.title }}</span>
                    </template>    
                    <el-menu-item  v-for="item1 in item.children" :index="item1.path">{{ item1.title }}</el-menu-item>
                 
                </el-sub-menu>

                <el-menu-item v-else :index="item.path">
                    <el-icon>
                        <i :class="['iconfont',item.icon]"></i>
                    </el-icon>
                    <span>{{ item.title }}</span>
                </el-menu-item>

            </template>
        </el-menu>
    </div>
</template>

<script setup>

const iconShouye = 'icon-shouye'
const iconGongwenbao = 'icon-gongwenbao'
const iconShangpinguanli = 'icon-shangpinguanli'
const iconDingdanguanli = 'icon-dingdanguanli'
const iconDianpuguanli = 'icon-dianpuguanli'
const iconShujutongji = 'icon-shujutongji'

const menus = [
  {
    path: '/home',
    title: '首页',
    icon: iconShouye
  },
  {
    path: '/account',
    title: '账号管理',
 icon   : iconGongwenbao,
    children: [
      {
        path: '/accountList',
        title: '账号列表',
      },
      {
        path: '/accountAdd',
        title: '添加账号',
      },
      {
        path: '/accountCenter',
        title: '个人中心',
      },
      {
        path: '/accountEdit',
        title: '修改密码',
      },
    ]
  },
  {
    path: '/good',
    title: '商品管理',
    icon: iconShangpinguanli,
    children: [
      {
        path: '/goodList',
        title: '商品列表',
      },
      {
        path: '/goodAdd',
        title: '商品添加',
      },
      {
        path: '/goodType',
        title: '商品分类',
      },
    ]
  },
  {
    path: '/order',
    title: '订单管理',
    icon: iconDingdanguanli,
  },
  {
    path: '/shop',
    title: '店铺管理',
    icon: iconDianpuguanli,
  },
  {
    path: '/statistics',
    title: '统计数据',
    icon: iconShujutongji,
    children: [
      {
        path: '/statisticsGoods',
        title: '商品统计',
      },
      {
        path: '/statisticsOrder',
        title: '订单统计',
      },
    ]
  },
]

import {computed} from 'vue'
import {useRoute} from 'vue-router'
const route = useRoute()

const Uproute =  computed(()=>{
    return route.path
 })
</script>

<style lang="scss" scoped>
@import '@/assets/icon/iconfont.css';
.menu {
    width: 200px;
    height: 100%;
    background-color: #304156;

    .title {
        width: 100%;
        height: 50px;
        color: white;
        text-align: center;
        line-height: 50px;
    }
}

:deep(.el-menu-item.is-active ){
    color: rgb(64, 158, 255);
}
</style>